<template>
  <div>
    <el-page-header @back="goBack" content="留言详情">
      <template slot="title">
        <el-link type="primary">返回首页</el-link>
      </template>
    </el-page-header>
    <div>
      <el-row>
        <el-col :span="8">
          <div class="sort-up-down">
            <el-tooltip class="item" effect="dark" content="时间正序排列" placement="bottom">
              <el-button @click="sortUp" circle type="primary" icon="el-icon-sort-up"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="时间倒序排列" placement="bottom">
              <el-button @click="sortDown" circle type="primary" icon="el-icon-sort-down"></el-button>
            </el-tooltip>
          </div>
        </el-col>
        <el-col :span="5" :offset="8">
          <div class="grid-content bg-purple-light">
            <el-select clearable @focus="getManagerInfoAll" v-model="mgId" placeholder="选择审批人">
              <el-option
                v-for="item in reviewerOptions"
                :key="item.mgId"
                :label="item.realName"
                :value="item.mgId"
              ></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="2" :offset="1" class="searchButton">
          <div>
            <el-button @click="search" type="primary" icon="el-icon-search"></el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-card class="inner-content">
      <el-collapse accordion>
        <el-collapse-item v-for="item in messageList" :key="item.index" :name="item.index">
          <template slot="title">
            <h3 class="inspect-person">
              <i class="header-icon el-icon-user-solid"></i>
              <el-link :underline="false" type="danger">{{item.realName}}</el-link>
            </h3>
            <el-divider direction="vertical"></el-divider>
            <h3 class="inspect-time">
              <i class="header-icon el-icon-time"></i>
              {{item.latestModifiedTime}}
            </h3>

            <el-divider direction="vertical"></el-divider>

            <h3 class="inspect-person">
              <i class="header-icon el-icon-key"></i>
              {{item.classroomName}}
            </h3>
          </template>
          <el-alert effect="dark" :closable="false" type="success">
            <h2>
              使用时间：
              <el-tag>{{item.beginTime}}--{{item.endTime}}</el-tag>
            </h2>
            <h2>
              留言内容：
              <el-card class="message-content">
                <div v-html="item.content"></div>
              </el-card>
            </h2>
          </el-alert>
        </el-collapse-item>
      </el-collapse>
    </el-card>
    <el-row>
      <el-col :span="24">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="limit"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      messageList: [],
      mgId: "",
      currentPage: 1,
      limit: 5,
      total: 10,
      reviewerOptions: []
    };
  },
  methods: {
    goBack() {
      this.$router.push("/welcome");
    },

    handleCurrentChange(page) {
      this.$http
        .get("/board/page/condition", {
          params: {
            mgId: this.mgId,
            page: page,
            order: this.order
          }
        })
        .then(resp => {
          let { code, msg, data } = resp.data;
          if (code == 1) {
            this.total = data.mapResult.count;

            this.messageList = data.mapResult.messageVOList;
          }
        })
        .catch(resp => {});
    },
    getManagerInfoAll() {
      this.$http
        .get("/manager/noAuthorize/managerInfo/all/")
        .then(resp => {
          let { code, msg, data } = resp.data;
          if (code == 1) {
            this.reviewerOptions = data.managerList;
          }
        })
        .catch(resp => {});
    },
    search() {
      this.$http
        .get("/board/page/condition", {
          params: {
            mgId: this.mgId,
            page: this.currentPage,
            order: this.order
          }
        })
        .then(resp => {
          let { code, msg, data } = resp.data;
          if (code == 1) {
            let total = data.mapResult.count;
            this.total = total;
            this.messageList = data.mapResult.messageVOList;
            return;
          }
          this.$message.info(msg);
        })
        .catch(resp => {});
    },
    sortUp() {
      this.$http
        .get("/board/page/condition", {
          params: {
            mgId: this.mgId,
            page: this.page,
            order: 1
          }
        })
        .then(resp => {
          let { code, msg, data } = resp.data;
          if (code == 1) {
            this.total = data.mapResult.count;

            this.messageList = data.mapResult.messageVOList;
          }
        })
        .catch(resp => {});
    },
    sortDown() {
      this.$http
        .get("/board/page/condition", {
          params: {
            mgId: this.mgId,
            page: this.page,
            order: 2
          }
        })
        .then(resp => {
          let { code, msg, data } = resp.data;
          if (code == 1) {
            this.total = data.mapResult.count;

            this.messageList = data.mapResult.messageVOList;
          }
        })
        .catch(resp => {});
    }
  },
  created() {
    this.search();
  }
};
</script>

<style scoped lang='less'>
.el-page-header {
  margin-top: 20px;
  margin-bottom: 10px;
}
.inner-content {
  margin-top: 5px;
}
.sort-up-down {
  margin-left: 20px;
}
.inspect-time {
  float: right;
}
.inspect-person {
  margin-left: 0px;
}
.el-card {
  border-radius: 20px;
}
.message-content {
  margin-left: 100px;
  width: 750px;
}
</style>